<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/allcss.css" rel="stylesheet" type="text/css"/>
        <link rel="shortcut icon"  href="image/icon6.ico" type="image/x-icon" /> 
        <title>addPlace</title>
        <script src="./script/jquery.js" type="text/javascript"></script>
        <style>
            #op4{
                color:#00aeec;
            }
        </style>
    </head>
    <body>
        <div id="aside">
            <img id="icon" src="./image/icon6.png">
            <div id="p1">管理员界面</div>  
        </div>
        <div id="main">
            <div id="list"><div id="op1" class="options">全部预约</div><div  id="op2" class="options">未审核</div><div  id="op3" class="options">已审核</div>
                <div  id="op4" class="options">地点管理</div><div  id="op5" class="options">地点上新</div><div  id="op6" class="options">数据库管理</div>
                <div  id="op7" class="options">学生信用度</div><div  id="op8" class="options">申诉回复</div>
            </div>
            <div id="content">
                <div class="addplaces">
                    <div class="addplace"> 
                        <form id="file_upload" method="post" action="./Servlet/addPlaceServlet" enctype="multipart/form-data"  target="myiframe">
                            <p>图片预览：</p><div id="preview-container"></div>
                            <div>
                                <img id="image-preview">
                                <p id="p2">请输入地点名称:</p><input id="position" type="text"  name="position" onkeyup="check()"> 
                                <input  id="image" type="file"  name="image" accept="image/gif, image/jpeg, image/png, image/jpg" onkeyup="check()">
                            </div>
                            <input id="button1" type="submit" value="上传图片" onclick="uploadFiles()" disabled />
                        </form>
                    </div>
                </div>
            </div>
            <iframe  width=0 height=0 frameborder=0 id="myiframe" name="myiframe"></iframe>
        </div>
        <script>
            const urlParams = new URLSearchParams(window.location.search);
            var name = urlParams.get('placeNumber');
            var file_upload = document.getElementById('file_upload');
            file_upload.setAttribute('action', "./Servlet/updatePlaceServlet?placeNumber=" + name);
            function query() {
                $.get("./Servlet/QueryPlaceServlet?&placeNumber=" + name, function (data, status) {
                    if (status) {
                        var datas = JSON.parse(data);
                        position.value = datas.PlacePosition;
                        var previewDiv = document.createElement('div');
                        previewDiv.className = 'preview-item';
                        previewDiv.style.backgroundImage = 'url(./placeImage/' + datas.PlaceImage + ')';
                        previewContainerDiv.appendChild(previewDiv);
                    }
                }
                );
            }
            query();
            var image = document.getElementById('image');
            var position = document.getElementById('position');
            var previewContainerDiv = document.getElementById('preview-container');
            var button1 = document.getElementById('button1');
            image.addEventListener('change', function () {
                var files = this.files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    if (file) {
                        previewContainerDiv.innerHTML = null;
                        var reader = new FileReader();
                        reader.onload = function (event) {
                            var previewDiv = document.createElement('div');
                            previewDiv.className = 'preview-item';
                            previewDiv.style.backgroundImage = 'url(' + event.target.result + ')';
                            previewContainerDiv.appendChild(previewDiv);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            function check() {
                if (position.value.length !== 0 && image.value.length !== 0)
                    button1.disabled = false;
                else
                    button1.disabled = true;
            }
        </script>
        <script src="./script/button.js" type="text/javascript"></script>
    </body>
</html>
